<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>MyZap! API</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="container col-5 p-5">
        <div class="display-4 mb-3">WhatsApp</div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">Número</span>
            </div>
            <input type="text" id="number" class="form-control" placeholder="" aria-label="number"
                aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">Mensagem</span>
            </div>
            <textarea id="msg" class="form-control" aria-label="With textarea"></textarea>
        </div>
        <div class="input-group row">
            <div class="col-sm-10">
                <button id="send" class="btn btn-success">Enviar</button>
            </div>
        </div>
        <div id="loading" class="row" style="text-align: center">
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">

        $("#send").click(function () {

            let number = $("#number").val();
            let msg = $("#msg").val();

            $("#loading").append('<img src="loading.gif" style="height: 50px">');

            (async () => {
                const response = await fetch('http://localhost:3333/sendText', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(
                        {
                            sessionName: "session1",
                            number: number,
                            text: msg
                        }
                    )
                });
                const content = await response.json();
                $("#loading").text('');
                $("#loading").append('<b>Msg enviada!</b>');
                console.log(content);
            })();
        });
    </script>
</body>

</html>